<script setup>
import {ref, computed, reactive} from "vue";
import {useStore} from "vuex";
import {ElMessage, ElMessageBox} from "element-plus";
const userForm2 = computed(() => store.state.userForm2)
let store = useStore();
const input1 = ref('')
const dialogFormVisible = ref(false);
const form = reactive({
  id: 0,
  name: '',
  levelName: '',
  url: '',
  specialty: '',
  address: '',
  introduction: '',
  del: false
});
const addUser = () => {
  // 创建新用户对象，包含levelName、url、specialty等字段
  const newUser = {
    id: store.state.userForm2.length + 1,
    name: form.name,
    levelName: form.levelName,
    url: form.url,
    specialty: form.specialty,
    address: form.address,
    introduction: form.introduction,
    del: false
  };
  store.dispatch('addUserToForm2', newUser);
};

const value1 = ref('')





const searchUsers = () => {
  const searchName = input1.value;
  const filteredUsers = userForm2.value.filter(user => user.name.includes(searchName));
  const userStrings = filteredUsers.map(user => `ID: ${user.id}, 用户名: ${user.name}, 等级: ${user.levelName}`).join('\n');

  ElMessageBox({
    title: '搜索结果',
    message: userStrings,
    dangerouslyUseHTMLString: true,
    beforeClose: (action, instance, done) => {
      done(); // 确保调用 done 以关闭对话框
    }
  });
};

const addUserDialog = () => {
  form.id = store.state.userForm2.length + 1; // 为新用户生成ID
  Object.keys(form).forEach(key => form[key] = ''); // 清空表单
  dialogFormVisible.value = true; // 显示对话框
};

const editUser = (user) => {
  Object.assign(form, { ...user }); // 将用户数据填充到表单
  dialogFormVisible.value = true; // 显示对话框
};

const submitUser = () => {
  if (form.id) {
    // 更新用户
    store.dispatch('updateUserInForm2', { index: form.id - 1, updatedUser: form }); // 假设id是从1开始的
  } else {
    // 添加用户
    addUser();
  }
  ElMessage({
    type: 'success',
    message: form.id ? '用户更新成功' : '用户添加成功'
  });
  dialogFormVisible.value = false; // 关闭对话框
};


const handleCancel = () => {
  ElMessage({
    type: 'info',
    message: '取消操作'
  });
  dialogFormVisible.value = false;
};


const deleteUser = (user) => {
  ElMessageBox.confirm('确定要删除该用户吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    store.dispatch('removeUserFromForm2', user.id - 1); // 假设id是从1开始的
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除'
    });
  });
};

</script>

<template>
  <div>
    <div class="right-little-body">
      <div class="little-title">
        <div class="title-top">
          <div class="title-top-left">
            <span>用户名称：</span>
            <div style="display: inline-block">
              <el-input
                  v-model="input1"
                  style="width: 200px"
                  size="large"
                  placeholder=""
              />
            </div>
          </div>
          <div class="title-top-middle">
            <div class="demo-date-picker">
              <div class="block">
                <span class="demonstration">创建时间：</span>
                <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                    :size="'default'"
                />
              </div>
            </div>
          </div>
          <div class="title-top-right">
            <el-button type="primary" @click="searchUsers">搜索</el-button>
          </div>
        </div>
        <div class="title-middle">
          <el-button type="primary" @click="addUserDialog">新增</el-button>
        </div>
        <div class="title-bottom">
          <el-table :data="userForm2" stripe style="width: 1200px" :border="true">
            <el-table-column prop="id" label="编号"/>
            <el-table-column prop="name" label="用户名"/>
            <el-table-column prop="levelName" label="咨询师等级"/>
            <el-table-column prop="url" label="头像">
              <template #default="scope">
                <img :src="scope.row.url" alt="头像" style="width: 50px; height: 50px;">
              </template>
            </el-table-column>
            <el-table-column prop="specialty" label="擅长领域"/>
            <el-table-column prop="address" label="所属地址"/>
            <el-table-column prop="introduction" label="个人简介">
              <template #default="scope">
                <div v-html="scope.row.introduction"></div>
              </template>
            </el-table-column>

            <el-table-column label="编辑">
              <template #default="scope">
                <el-button type="primary" @click="editUser(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
            <el-table-column label="删除">
              <template #default="scope">
                <el-button type="danger" @click="deleteUser(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>


        </div>
      </div>
      <div>
        <el-dialog
            v-model="dialogFormVisible"
            title="用户信息"
            width="500px"
            @before-close="handleCancel">
          <el-form :model="form">
            <el-form-item label="用户名" :label-width="100">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="咨询师等级" :label-width="100">
              <el-input v-model="form.levelName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="头像URL" :label-width="100">
              <el-input v-model="form.url" autocomplete="off" />
            </el-form-item>
            <el-form-item label="擅长领域" :label-width="100">
              <el-input v-model="form.specialty" autocomplete="off" />
            </el-form-item>
            <el-form-item label="所属地址" :label-width="100">
              <el-input v-model="form.address" autocomplete="off" />
            </el-form-item>
            <el-form-item label="个人简介" :label-width="100">
              <el-input
                  type="textarea"
                  v-model="form.introduction"
                  autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="submitUser">确定</el-button>
            </div>
          </template>
        </el-dialog>
      </div>


    </div>
  </div>
</template>

<style scoped>
.right-little-body {
  padding: 20px;
  width: 100%;
  position: relative;
  height: 100%;
}

.little-title {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.title-top {
  width: 100%;
  height: 40px;
}

.title-top-left {
  display: inline-block;
}

.title-top-middle {
  margin: 0 15px;
  display: inline-block;
}

.title-top-right {
  display: inline-block;
}

.title-middle {
  margin: 10px 15px;
}

.title-bottom {
  margin: 15px 15px;
}

</style>